<template>
    <div class="wrapper">
        <div class="checkInfo">
            <p>确认订单</p>
        </div>

        <!---配送信息----->
        <div class="Info-detail">
            <p>订单配送至</p> 
            <p  @click="toUserAddress">{{deliveryaddress!=null?deliveryaddress.address:'请选择送货地址'}} <i style="position: absolute;right: 2vw;margin-top: 2.8vw;" class="fa fa-angle-right"></i></p>
            <p>{{deliveryaddress==null?user.userName:deliveryaddress.contactName}}{{deliveryaddress==null?user.userSex:deliveryaddress.contactSex | sexFilter}}  {{deliveryaddress==null?user.userId:deliveryaddress.contactTel}}</p>      <!--这里的userid要根据deliveryaddress修改！-->
        </div>

        <!-----店铺信息----->
        <div class="Info-shop">
            <p id="shop-name-in-check">{{ business.businessName }}</p>
        </div>

        <!---------点菜页面------------->
        <ul class="business-dishes">
            <li v-for="item in cartArr">
                <img :src="item.food.foodImg">
                <div class="dishes-info-left">
                    <h3>{{item.food.foodName}} x {{ item.quantity }}</h3>
                </div>
                <p>￥{{item.food.foodPrice*item.quantity}}</p>
            </li>
        </ul>

        <div class="peisong" style="margin-top: 3vw;">
            <p class="left">配送费</p>
            <p class="right">￥{{ business.deliveryPrice }}</p>
        </div>

        <!-----底部支付-------->
        <div class="pay">
            <div class="pay-left">
                <p id="ttmoney" style="margin-left: 58vw;font-size: 4vw; margin-top: 2vw;">合计￥{{ totalPrice }}</p>
                <p id="youhui" style="margin-left: 58vw; font-size: 2vw;color: red;">已优惠￥0</p>
            </div>

            <div class="pay-right" @click="toPayment">
                <p>去支付</p>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'Orders',
    data() {
        return {
            businessId: this.$route.query.businessId,
            business: {},
            user: {},
            cartArr: [],
            deliveryaddress: {}
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');
        this.deliveryaddress = this.$getLocalStorage(this.user.userId);
        //查询当前商家
        this.$axios.post('BusinessController/getBusinessById', this.$qs.stringify({
            businessId: this.businessId
        })).then(response => {
            this.business = response.data;
        }).catch(error => {
            console.error(error);
        });

        //查询当前用户在购物车中的当前商家食品列表
        this.$axios.post('CartController/listCart', this.$qs.stringify({
            userId: this.user.userId,
            businessId: this.businessId
        })).then(response => {
            this.cartArr = response.data;
        }).catch(error => {
            console.error(error);
        });
    },
    computed: {
        totalPrice() {
            let totalPrice = 0;
            for (let cartItem of this.cartArr) {
                totalPrice += cartItem.food.foodPrice * cartItem.quantity;
            }
            totalPrice += this.business.deliveryPrice;
            return totalPrice;
        }
    },
    filters: {
        sexFilter(value) {
            return value == 1 ? '先生' : '女士';
        }
    },
    methods: {
        toUserAddress() {
            this.$router.push({ path: '/userAddress', query: { businessId: this.businessId } });
        },
        toPayment() {
            if (this.deliveryaddress == null) {
                alert('请选择送货地址！');
                return;
            }

            //创建订单
            this.$axios.post('OrdersController/createOrders', this.$qs.stringify({
                userId: this.user.userId,
                businessId: this.businessId,
                daId: this.deliveryaddress.daId,
                orderTotal: this.totalPrice
            })).then(response => {
                let orderId = response.data;
                if (orderId > 0) {
                    this.$router.push({ path: '/payment', query: { orderId: orderId } });
                } else {
                    alert('创建订单失败！');
                }
            }).catch(error => {
                console.error(error);
            });

            this.$axios.post('BusinessController/salesAddById', this.$qs.stringify({
                businessId: this.businessId
            })).then(response => {
            }).catch(error => {
                console.error(error);
            });
        }
    }
}
</script>

<style scoped>
.wrapper {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    /* 隐藏水平滚动条 */
}

/****************顶部标题-确认订单********************/
.wrapper .checkInfo {
    width: 100vw;
    height: 12vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #51b9fe;
    border-bottom: solid 1px white;
}

.wrapper .checkInfo p {
    font-size: 5vw;
    color: white;
}

/**********************配送信息******************************/
.wrapper .Info-detail {
    width: 100vw;
    height: 29vw;
    display: flex;
    user-select: none;
    flex-direction: column;
    background-color: #51b9fe;
}

.wrapper .Info-detail p {
    margin-left: 2vw;
    font-size: 4vw;
    line-height: 9vw;
    color: white;
}

.wrapper .Info-shop {
    width: 100%;
    height: 12vw;
    display: flex;
    border-bottom: solid 1px black;
}

.wrapper .Info-shop p {
    color: grey;
    margin-left: 3vw;
    font-size: 4vw;
    display: flex;
    align-items: center;
}

/***************************底部支付***************************/
.wrapper .pay {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 13vw;
    background-color: aliceblue;
    display: flex;
    align-items: center;
}

.wrapper .pay .pay-left {
    width: 100%;
    user-select: none;
    align-items: center;
    line-height: 4vw;
}

.wrapper .pay .pay-right {
    background-color: #0097ff;
    color: #fff;
    width: 30%;
    height: 70%;
    font-size: 2.4vw;
    border-radius: 20vw;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}


/************************点菜详情**********************************/
.wrapper .business-dishes {
    width: 100%;
    /* 确保宽度与父容器一致 */
    display: flex;
    flex-direction: column;
    /* 垂直排列 */
    padding: 0 8vw;
    /* 添加左右内边距 */
    box-sizing: border-box;
    /* 包括 padding 在内 */
}

.wrapper .business-dishes li {
    display: flex;
    justify-content: space-between;
    /* 左右对齐 */
    align-items: center;
    border-bottom: solid 1px #f0f0f0;
    /* 添加下划线 */
    padding: 2vw 0;
    /* 添加上下内边距 */
}

.wrapper .business-dishes li img {
    width: 10vw;
    height: 10vw;
    border-radius: 5px;
    margin-right: 4vw;
}

.wrapper .business-dishes .dishes-info-left {
    font-size: 2vw;
}

.wrapper .business-dishes li p {
    font-size: 3vw;
    margin-left: 43vw;
}

.wrapper .business-dishes .peisong {
    display: flex;
    justify-content: space-between;
    /* 左右对齐 */
    align-items: center;
    font-size: 3vw;
    padding: 2vw 0;
    /* 添加上下内边距 */
    border-top: solid 1px #f0f0f0;
    /* 添加上边框 */
}

.wrapper .peisong {
    width: 100%;
    display: flex;
    user-select: none;
    align-items: center;
    font-size: 3vw;
}

.wrapper .peisong .left {
    margin-left: 8vw;
}

.wrapper .peisong .right {
    margin-left: 68vw;
}
</style>